<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue实例的生命周期钩子函数</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    hello vue lifecycle
  </div>
  <script>
    // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
    var vm = new Vue({
      el: '#root',
      template: `<div>hello tempalte {{msg}}</div>`,
      data: {
        msg: 'hello msg'
      },
      beforeCreate: function() {
        alert("beforeCreate");
      },
      created: function() {
        alert("created");
      },
      // 模板和数据相结合，即将挂载在页面上前的一瞬间
      beforeMount: function() {
        alert(this.$el);
        alert("beforeMount");
      },
      mounted: function() {
        alert(this.$el);
        alert("mounted!")
      },
    })
  </script>
</body>
</html>